<template>
	<view style="padding-bottom: 30rpx;">
		<view class="propereties-statistic">
			<p>总资产</p>
			<p>{{propertiesTotal}}</p>
		</view>
		<!-- 		<view class="propereties-list">
			<view class="properties-item" v-for="item in properties" :key="item._id" @click="toDetail(item)">
				<span>{{item.propertyName}}</span>
				<span>{{item.count}}</span>
			</view>
		</view> -->
		<u-cell-group style="padding: 0 30rpx;">
			<u-cell v-for="item in properties" :title="item.propertyName" :value="''+item.count"
				@click="toDetail(item)"></u-cell>
		</u-cell-group>
		<u-button class="add-property" size="small" type="primary" @click="openDialog" text="添加"></u-button>
		<uni-popup ref="inputDialog" type="dialog">
			<uni-popup-dialog ref="inputClose" mode="input" title="输入资产名" value="" placeholder="请输入内容"
				@confirm="dialogConfirm"></uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script>
	import {
		callCloudFunction
	} from '@/api/requests.js'
	export default {
		data() {
			return {
				userInfo: {},
				properties: []
			}
		},
		computed: {
			propertiesTotal() {
				if (!this.properties.length) {
					return 0
				}
				let propertiesTotal = 0
				this.properties.forEach(property => {
					propertiesTotal += property.count
				})
				return propertiesTotal.toFixed(2)
			}
		},
		methods: {
			init(){
				const that = this
				uni.getStorage({
					key: 'userInfo',
					success: function(res) {
						that.userInfo = res.data
						that.getMyProperties()
					}
				});
			},
			toDetail(property) {
				uni.navigateTo({
					url: `/pages/propertyDetail/propertyDetail?_id=` + `${property._id}`
				});
			},
			getMyProperties() {
				callCloudFunction('getProperties', {
						owner: this.userInfo._id
					}, res => {
						this.properties = res.result.data
					},
					err => {
						uni.showModal({
							content: `获取用户资产失败`,
							showCancel: false
						})
					})
			},
			openDialog() {
				this.$refs.inputDialog.open()
			},
			dialogConfirm(value) {
				const that = this
				callCloudFunction('addProperty', {
						owner: that.userInfo._id,
						propertyName: value,
						count: 0,
						timestamp: new Date().getTime()
					}, res => {
						uni.showModal({
							content: `新增资产成功`,
							showCancel: false
						})
						that.getMyProperties()
						this.$refs.inputDialog.close()
					},
					err => {
						uni.showModal({
							content: `新增资产失败`,
							showCancel: false
						})
					})
			}
		},
		onShow() {
			this.init()
		}
	}
</script>

<style>
	.propereties-statistic {
		height: 18vh;
		width: 100vw;
		background-color: #eee;
		text-align: center;
		padding-top: 4vh;
	}

	.propereties-statistic>p:nth-child(1) {
		font-size: 20px;
		margin-bottom: 2vh;
	}

	.propereties-statistic>p:nth-child(2) {
		color: #555;
	}

	.propereties-list {
		margin: 0 15px;
		/* min-height: 70vh; */
		/* box-shadow: 0px 2px 2px 1px #ccc; */
	}

	.properties-item {
		height: 47px;
		line-height: 47px;
		border-bottom: 1px solid #ddd;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}

	.add-property {
		width: 180rpx;
		margin: 30rpx auto;
	}
</style>
